import React from 'react';
import {useLocation} from "react-router-dom";
import LogFactory from "../../../../log/LogFactory";
import DrawerEnhance from "../../../../common/drawer/DrawerEnhance";
import {ReportDetail} from "../../../../type/entity/ReportDetail";
import dayjs from "dayjs";
import {fetchUpdateReportDetail} from "../../../../storage/redux/reducer/reportDetail";
import {DatePicker, Form, Input, InputNumber, Select} from "antd";
import {DATE_FORMAT} from "../../../../util/Constant";
import TextArea from "antd/es/input/TextArea";
import {useAppSelector} from "../../../../storage/redux/hook";

const log = LogFactory.getLogger("ReportDetailUpdate");
const ReportDetailUpdate = () => {
    const state = useLocation().state.children as ReportDetail;
    const opData = useAppSelector(s => s.reportDetail.detailItems);

    log.debug("更新的state", state);
    const formDataConverter = (value: ReportDetail): ReportDetail => {
        if (dayjs.isDayjs(value.consumeDate)){
            value.consumeDate = value.consumeDate.format("YYYY-MM-DD");
        }
        return value;
    };

    return (
        <DrawerEnhance<ReportDetail>
            title={"更新报销记录"}
            updateId={state.id}
            initialValues={{...state, consumeDate: dayjs(state.consumeDate)}}
            requestAction={fetchUpdateReportDetail}
            formDataConverter={formDataConverter}
        >
            <Form.Item<ReportDetail> name={"reportId"} label={"报销单编号"} hidden>
                <Input disabled/>
            </Form.Item>
            <Form.Item<ReportDetail> name={"item"} label={"报销项"} required>
                <Select options={opData.filter(e => e.show).map(e => ({label: e.label, value: e.label}))}/>
            </Form.Item>
            <Form.Item<ReportDetail> name={"amount"} label={"报销金额"} required rules={[
                {required: true, message: "请输入报销金额!"},
                {type: "number", message: "请输入正确的金额!", min: 1}
            ]}>
                <InputNumber min={0.00} precision={2} addonAfter={"¥"}/>
            </Form.Item>
            <Form.Item<ReportDetail> name={"consumeDate"} label={"消费时间"} required>
                <DatePicker format={DATE_FORMAT}/>
            </Form.Item>
            <Form.Item<ReportDetail> name={"remark"} label={"备注信息"}>
                <TextArea rows={4}/>
            </Form.Item>
        </DrawerEnhance>
    );
};

export default ReportDetailUpdate;